<template>
	<view class="">
		<view class="box">
			<view class="box_item">
				<view class="box_item_left">
					企业名称<view class="">*</view>
				</view>
				<input :disabled="disabled" v-model="form.title" class="box_item_input" :placeholder="`请输入企业名称`"
					placeholder-class="box_item_input_class" type="text" />
			</view>
			<view class="box_item">
				<view class="box_item_left">
					组织机构代码<view class="">*</view>
				</view>
				<input :disabled="disabled" v-model="form.licenceNo" class="box_item_input" placeholder="请输入组织机构代码"
					placeholder-class="box_item_input_class" type="text" />
			</view>
			<view class="box_item">
				<view class="box_item_left">
					法人<view class="">*</view>
				</view>
				<input :disabled="disabled" v-model="form.corpName" class="box_item_input" placeholder="请输入法人姓名"
					placeholder-class="box_item_input_class" type="text" />
			</view>
			<view class="box_item">
				<view class="box_item_left">
					省市区<view class="">*</view>
				</view>
				<view v-if="!disabled" class="box_item_picker">
					<uni-data-picker :disabled="disabled" placeholder="请选择" class="data_picker" popup-title="请选择所在地区"
						:localdata="dataTree" v-model="form.thirdCode" @change="handleChangeAddress">
					</uni-data-picker>
				</view>
				<view v-else class="box_item_input">
					{{`${form.province}/${form.city}/${form.region}`}}
				</view>
			</view>
			<view class="box_item"
				style="height: 202rpx;border-bottom:none;align-items: flex-start;padding-top: 32rpx;">
				<view class="box_item_left">
					详细地址<view class="">*</view>
				</view>
				<textarea :disabled="disabled" class="textarea box_item_input" v-model="form.address"
					placeholder-class="box_item_input_class" placeholder="请输入详细地址" maxlength="100" />
			</view>
		</view>
		<view class="box">
			<view class="box_item"
				style="align-items: flex-start;justify-content: space-between; border-bottom:none;height: 224rpx;padding-top: 32rpx;">
				<view class="box_item_left">
					营业执照
				</view>
				<view class="box_img">
					<view v-if="form.licenceImg" class="box_img_have">
						<image class="img_have" :src="form.licenceImg" mode=""></image>
						<image v-if="!disabled" @click="handleDelImg" class="img_del"
							src="@/packagesC/static/procure/guanbi.png" mode=""></image>
					</view>
					<view v-if="!form.licenceImg && !disabled" @click="handleImgUpload" class="box_img_add">
						<image src="@/packagesC/static/xiangji.png" mode=""></image>
						<view class="">
							上传图片
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box" style="margin-bottom: 0;">
			<view class="box_item">
				<view class="box_item_left">
					联系人<view class="">*</view>
				</view>
				<input :disabled="disabled" v-model="form.linker" class="box_item_input" placeholder="请输入联系人姓名"
					placeholder-class="box_item_input_class" type="text" />
			</view>
			<view class="box_item">
				<view class="box_item_left">
					联系电话<view class="">*</view>
				</view>
				<input :disabled="disabled" v-model="form.linkphone" maxlength="11" class="box_item_input"
					placeholder="请输入联系人电话" placeholder-class="box_item_input_class" type="number" />
			</view>
			<!-- <view class="box_item">
				<view class="box_item_left">
					备注
				</view>
				<input v-if="!disabled" :disabled="disabled" v-model="form.remark" class="box_item_input" placeholder="请输入备注内容" placeholder-class="box_item_input_class" type="text" />
				<view v-else class="box_item_input">
					{{form.remark}}
				</view>
			</view> -->
		</view>
		<view v-if="!disabled" class="bottom">
			<view @click="handleSubmit" class="bottom_btn">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addTeam,
		editTeam,
		detailMyTeam,
		listTeamrole,
		teamDetail
	} from "@/api/team/index.js";

	import {
		imgUpload
	} from "@/api/common.js"
	import regRule from '@/common/rules'
	export default {
		data() {
			return {
				disabled: false,
				form: {
					id: undefined,
					type: 'E',
					svrType: 'CARGO',
					title: null,
					licenceNo: null,
					corpName: null,
					thirdCode: null,
					province: null,
					city: null,
					region: null,
					address: null,
					licenceImg: null,
					linker: null,
					linkphone: null,
					remark: null,
				},
				dataTree: [],
				pet_team: {},
			}
		},
		computed: {
			addressOptions() {
				let addressOptions = this.$store.state.addressOptions
				this.dataTree = addressOptions
				return addressOptions;
			}
		},
		onLoad(e) {
			this.pet_team = uni.getStorageSync('pet_team')
			if(this.pet_team.applyStatus && this.pet_team.cargoTeamStatus=='DENY'){
				this.getTeamDetail()
			}
			
		},
		methods: {
			handleChangeAddress(e) {
				let address = e.detail.value.map(item => item.text);
				this.form.province = address[0] || '';
				this.form.city = address[1] || '';
				this.form.region = address[2] || '';
			},
			handleDelImg() {
				this.form.licenceImg = ''
			},
			getTeamDetail(){
				teamDetail({id:this.pet_team.cargoTeamId}).then(res=>{
					this.form = {
						type: 'E',
						svrType: 'CARGO',
						title: res.name,
						licenceNo: res.licenceNo,
						corpName: res.corpName,
						thirdCode: res.thirdCode,
						province: res.province,
						city: res.city,
						region: res.region,
						address: res.address,
						licenceImg: res.licenceImg,
						linker: res.linker,
						linkphone: res.linkphone,
					}
				})
			},
			// 上传图片
			handleImgUpload() {
				uni.chooseImage({
					count: 1,
					success: async (res) => {
						uni.showLoading({
							title: '上传中'
						})
						// console.log(res.tempFilePaths);
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							let data = await imgUpload(res.tempFilePaths[i])
							// console.log(JSON.parse(data.data).url)
							this.form.licenceImg = JSON.parse(data.data).url
						}
						uni.hideLoading()
					}
				})
			},
			handleSubmit() {
				if (!this.form.title ||
					!this.form.type ||
					!this.form.corpName ||
					!this.form.province ||
					!this.form.address ||
					!this.form.linker ||
					!this.form.linkphone ||
					!this.form.licenceNo) {
					return uni.showToast({
						title: '请填写必填项',
						icon: 'none'
					})
				}
				if (!regRule.phone.test(this.form.linkphone)) return uni.showToast({
					icon: 'none',
					title: '手机号格式不正确'
				})
				if (this.pet_team.applyStatus && this.pet_team.cargoTeamStatus == 'DENY') {
					this.form.id = this.pet_team.cargoTeamId
					this.form.status = 'WAIT'
					editTeam(this.form).then(res => {
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						this.getCompany()
					})
				} else {
					addTeam(this.form).then(res => {
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						this.getCompany()
					})
				}
			},
			getCompany(){
				listTeamrole({svrType:'CARGO',status:'PASS'}).then(e=>{
					let item = e?.find(item=>item.teamType == 'E')
					if(item){
						uni.setStorageSync('pet_team',{teamId:item.teamId,teamName:item.teamName,applyStatus:item.applyStatus})
					}else{
						let userItem = e[0]
						uni.setStorageSync('pet_team',{
							teamId:'-1',
							teamName:'个人',
							applyStatus:userItem.applyStatus, //是否有申请过服务商
							cargoTeamId:userItem.cargoTeamId, // 再次申请服务商要上传的id
							cargoTeamStatus:userItem.cargoTeamStatus, //后台审核状态
						})
					}
					uni.navigateBack()
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		background: #f8f8f8;
	}

	.box_item_input_class {
		color: #BBBBBB;
	}

	.data_picker {
		flex: 1;
	}

	.data_picker .uni-data-tree .uni-data-tree-input .input-value {
		border: none !important;
		// background: #f6f6f6;
		height: 80rpx;
		padding: 0 !important;

		.placeholder {
			color: #BBBBBB !important;
			font-size: 32rpx !important;
			text-align: right !important;
		}

		.selected-item {
			text {
				font-size: 32rpx !important;
			}
		}

		.selected-area {
			justify-content: flex-end;

			.selected-list {
				width: 500rpx !important;
				margin-left: auto;
				justify-content: flex-end;
				// justify-content: flex-end;
				// flex: 1 !important;
			}
		}
	}
</style>
<style scoped lang="scss">
	.box {
		width: 100%;
		padding: 0 32rpx;
		background: #fff;
		box-sizing: border-box;
		margin-bottom: 16rpx;

		.box_item {
			width: 100%;
			height: 122rpx;
			border-bottom: 1rpx solid #eee;
			display: flex;
			align-items: center;

			.box_item_left {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: var(--h1Color);
				line-height: 42rpx;
				display: inline-block;

				view {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 24rpx;
					color: #FE4338;
					line-height: 32rpx;
					display: inline-block;
				}
			}

			.box_item_input {
				flex: 1;
				margin-left: 20rpx;
				text-align: right;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				line-height: 42rpx;
			}

			.textarea {
				height: 150rpx;
			}

			.box_item_picker {
				flex: 1;
				padding-left: 20rpx;
				box-sizing: border-box;
			}

			.box_img {
				display: flex;

				.box_img_have {
					width: 180rpx;
					height: 180rpx;
					position: relative;

					&:nth-child(3n) {
						margin-right: 0;
					}

					.img_have {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}

					.img_del {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						top: -15rpx;
						right: -15rpx;
					}
				}

				.box_img_add {
					width: 180rpx;
					height: 180rpx;
					border: 2rpx dashed #EEEEEE;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-radius: 8rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-bottom: 8rpx;
					}

					view {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color:  var(--h2Color);
						line-height: 33rpx;
					}
				}

			}
		}
	}

	.bottom {
		width: 100%;
		background: #fff;
		box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
		padding: 12rpx 24rpx 50rpx;

		.bottom_btn {
			width: 702rpx;
			background: var(--primaryBg);
			border-radius: 8rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: var(--h1Color);
			line-height: 88rpx;
			text-align: center;
		}
	}
</style>